<template>
	<view class="box"  
	>
		<view class="menu " 
			v-for="(item,index) in data" :key="index"
		>
			<view class="menu-item-secondary " 
				@click="clickItem(item)"
				:class="menu_id == item.menu_id?'menu-item-secondarySelect ':''" 
			>
				<text class="iconfont "></text>
				<text class="text">{{item.title}}</text>
				<view class="right" v-if="item.value == 'children'"   >
					<text v-if="menu_id == item.menu_id" class="iconfont icon-xuanzeqizhankai"></text>
					<text  v-else  class="iconfont icon-xiangzuo"></text>
				</view>
			</view>
			<menu-final :menuId="menuId" v-if="item.children && menu_id == item.menu_id" :data="item.children" ></menu-final>
		</view>
	</view>
</template>

<script>
	export default {
		name:"menu-space",
		props:{
			data:{
				type: Array
			},
			menuId:{
				type: Array
			}
		},
		data() {
			return {
				selected:false,
				menu_id:null
			};
		},
		mounted() {
			this.menu_id = this.menuId[1];
		},
		methods:{
			clickItem(element){
				if(element.url){
					this.goUrl( element.url ) ;
				}
				if(this.menu_id != element.menu_id) this.menu_id = element.menu_id ;
				// else this.menu_id = null;
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			}
		}
	}
</script>

<style scoped lang="scss" >
	$menu-item-secondary:#869fb1;
	.menu {
	  opacity: 0;
	  transform: translateY(-20px);
	  transition: opacity 0.3s ease, transform 1s ease;
	  animation: fadeInDown .5s ease forwards;
	}
	
	
	
	@keyframes fadeInDown {
	  from {
	    opacity: 0;
	    transform: translateY(-20px);
	  }
	  to {
	    opacity: 1;
	    transform: translateY(0);
	  }
	}
	.menu-item-secondary{
		display: flex;
		align-items:center;
		padding:10px 20px;
		color:$menu-item-secondary;
		font-weight: bold;
		.text{
			flex:1;
		}
		.right{
			padding-top:2px;
			.iconfont{
				font-weight: bold;
				font-size: 12px;
			}
		}
		.iconfont{
			flex:0.178;
			font-weight:400;
			font-size:16px;
		}
	}
	.menu-item-secondarySelect,.menu-item-secondary:hover{
		color: #fff;
		cursor:pointer;
		transition:1s;
	}
	.menu{
		background: #131e26;
		
	}
</style>